<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header>
      <div>
        <img
          src="../assets/Naruto.jpg"
          style="width: 60px; height: 60px"
          alt=""
        />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" round @click="logout"
        >退出登录</el-button
      ></el-header
    >
    <!-- 主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="!isCollapse ? '250px' : '75px'">
        <el-col :span="12">
          <!-- 控制展开按钮 -->
          <div class="collapse" @click="changeCollapse">|||</div>
          <!-- default-active是index值 -->
          <el-menu
            :default-active="activeNav"
            class="el-menu-vertical-demo"
            background-color="#323845"
            text-color="#fff"
            active-text-color="#369cff"
            :unique-opened="true"
            :collapse-transition="false"
            :collapse="isCollapse"
            :router="true"
          >
            <!-- 一级菜单 -->
            <el-submenu
              :index="item.id + ''"
              v-for="item in menuList"
              :key="item.id"
            >
              <template slot="title">
                <!-- 动态绑定 -->
                <i :class="iconsObj[item.id]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <!-- 二级菜单 index的地址要注意/的问题-->
              <el-menu-item
                v-for="sonItem in item.children"
                :index="sonItem.path + ''"
                :key="sonItem.id"
                @click="saveActiveNav(sonItem.path)"
              >
                <!-- <template slot="title">选项一</template> -->
                <i class="el-icon-menu"></i>
                <span slot="title">{{ sonItem.authName }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-aside>
      <!-- 主体内容区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      // 左侧侧边栏菜单数据
      menuList: [],
      iconsObj: {
        125: 'iconfont icon-yonghu',
        103: 'iconfont icon-component-full',
        101: 'iconfont icon-gift',
        102: 'iconfont icon-dingdan',
        145: 'iconfont icon-shuju',
      },
      // 是否展开
      isCollapse: false,
      // 激活的子菜单 index值
      activeNav: '',
    }
  },
  created() {
    this.getMenuList()
    this.activeNav = window.sessionStorage.getItem('activeNav')
  },
  methods: {
    logout: function () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    async getMenuList() {
      const { data: result } = await this.$axios.get('menus')
      // console.log(result)
      if (result.meta.status != 200) {
        return this.$message.error(result.meta.msg)
      }
      this.menuList = result.data
    },
    // 改变展开状态
    changeCollapse() {
      this.isCollapse = !this.isCollapse
    },
    // 保存当前激活的最子菜单
    saveActiveNav(a) {
      window.sessionStorage.setItem('activeNav', a)
    },
  },
}
</script>

<style lang="less" scoped>
@gray: #373e41;
@asideGray: #323845;
@pale: #eaeef2;
@asideBgc: #485264;
.home-container {
  height: 100%;
  .el-header {
    padding-left: 0px;
    background-color: @gray;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div {
      color: white;
      > span {
        margin-left: 15px;
      }
      display: flex;
      align-items: center;
    }
  }
  .el-aside {
    background-color: @asideGray;
    .el-col {
      width: 100%;
      .collapse {
        height: 30px;
        display: flex;
        justify-content: center;
        background-color: @asideGray;
        color: #fff;
        cursor: pointer;
        letter-spacing: 0.2em;
      }
      .el-menu {
        width: 100%;
        // 一级菜单
        .el-submenu {
          width: 100%;
          .iconfont {
            margin-right: 15px;
          }
        }
      }
    }
  }
  .el-main {
    background-color: @pale;
  }
}
</style>
